<!-- 中奖弹窗 -->
<!--XXX 已弃用，考虑删除 -->
<template>
  <with-mask :is-show="true">
    <div
      class="container"
      :class="popupType === 'winning' ? 'show' : ''"
    >
      <!-- 边框装饰 -->
      <div class=" border-decorate">
        <!-- 阳光 -->
        <image
          class="sunshine"
          src="https://ustatic.hudongmiao.com/joymew-host-contest/lottery-sunshine.png"
          alt=""
        />
        <!-- 礼物 -->
        <image
          class="cloud"
          src="https://ustatic.hudongmiao.com/joymew-host-contest/lottery-cloud.png"
          alt=""
        />
      </div>
      <!-- 中奖信息 -->
      <div class="winning-info">
        <!-- 标题 -->
        <div class="title">
          <text class="title-text">
            恭喜您获得
          </text>
        </div>
        <!-- 奖品图片 -->
        <div class="prize-img">
          <image
            class="prize-img"
            :src="lotteryResult.prizeImg"
          />
        </div>
        <!-- 奖品名称 -->
        <div class="prize-name">
          <text class="prize-name-text">
            {{ lotteryResult.prizeName }}
          </text>
        </div>
        <!-- 奖品说明 -->
        <div
          v-show="lotteryResult.prizeType === 'cash'"
          class="prize-desc"
        >
          <text class="prize-desc-text">
            现金红包已发送至您的<text class="app">
              嗨喵APP账户
            </text>中，请去嗨喵APP内“我的余额”查看
          </text>
        </div>
        <!-- 底部按钮，根据类型不同显示不同 -->
        <div
          v-show="lotteryResult.prizeType === 'cash'"
          class="left-btn download-btn"
          @click="() => { }"
        >
          下载嗨喵APP
        </div>
        <div
          v-show="lotteryResult.prizeType === 'normal'"
          class="left-btn check-btn"
          @click="goToLotteryRecord"
        >
          查看奖励
        </div>
        <div
          v-show="lotteryResult.prizeType != 'contact'"
          class="right-btn draw-btn"
          @click="toLottery"
        >
          再抽一次
        </div>
        <button
          v-show="lotteryResult.prizeType === 'contact'"
          class="contact-btn"
          open-type="contact"
        >
          联系客服
        </button>
      </div>
      <!-- 关闭按钮 -->
      <div
        class="close-btn"
        @click="close"
      >
        <image
          class="close-btn-img"
          src="@/static/icons/common/close.png"
          alt=""
        />
      </div>
    </div>
  </with-mask>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import { navigateTo } from '@/utils/navigate';
import { useLottery } from '../../stores/lottery';

const lottery = useLottery();
const { lotteryResult, popupType } = storeToRefs(lottery);
const { changePopupType, toLottery } = lottery;

/** 跳转到抽奖记录页面 */
const goToLotteryRecord = () => {
  changePopupType('no');
  navigateTo('my-miaodou', { type: 'lottery-record' });
};

const close = () => {
  changePopupType('no');
};
</script>

<style lang="scss" scoped>
.container {
  position: relative;

  display: grid;
  grid-template:
    "winningInfo" 1fr
    "closeBtn" 48px;
  row-gap: 20px;
  justify-items: center;

  // 出现时的动画
  &.show {
    scale: 0;
    animation: popup-show .6s ease-in-out forwards;

    @keyframes popup-show {
      0% {
        scale: 0;
      }

      100% {
        scale: 1;
      }
    }
  }

  // 边框装饰
  .border-decorate {
    position: absolute;
    top: -32.5641vw;
    left: 50%;
    z-index: -1;

    width: 65.1282vw;
    height: 60.2564vw;

    transform: translateX(-50%);

    // 阳光
    .sunshine {
      position: absolute;
      top: 0;
      left: 0;

      width: 100%;
      height: 100%;
    }

    // 礼物
    .cloud {
      position: absolute;
      top: 12.5641vw;
      left: 50%;

      width: 59.4872vw;
      height: 32.5641vw;

      transform: translateX(-50%);
    }
  }

  .winning-info {
    grid-area: winningInfo;

    width: calc(73.8462vw - 24px);

    background: linear-gradient(180deg, #faf1e2, #f5e0c9 100%);
    border: 1px solid #fff;
    border-radius: 16px;

    display: grid;
    grid-template:
      ". ." 20px
      "title title" 8.9744vw
      ". ." 12px
      "prizeImg prizeImg" 30.7692vw
      ". ." 16px
      "prizeName prizeName" 7.9487vw
      ". ." 16px
      "prizeDesc prizeDesc" auto
      ". ." 16px
      "leftBtn rightBtn" auto
      ". ." 33px
      / 1fr 1fr;
    justify-items: center;

    // 标题
    .title {
      grid-area: title;
      align-self: self-start;

      position: relative;
      z-index: 1;

      width: 43.3333vw;
      height: 8.9744vw;

      text-align: center;

      // 标题文字
      .title-text {
        font-size: 5.1282vw;
        font-weight: 500;
        line-height: 8.9744vw;
        color: #ec5f72;
      }

      // 标题背景
      .title-img {
        position: absolute;
        top: 0;
        left: 50%;
        z-index: -1;

        width: 100%;
        height: 100%;

        transform: translateX(-50%);
      }
    }

    // 奖品图片
    .prize-img {
      grid-area: prizeImg;

      width: 30.7692vw;
      height: 30.7692vw;
      overflow: hidden;

      .prize-img-img {
        width: 100%;
        height: 100%;
      }
    }

    // 奖品名称
    .prize-name {
      grid-area: prizeName;

      height: 7.9487vw;

      font-size: 5.641vw;
      font-weight: 500;
      line-height: 7.9487vw;
      color: #743920;
      text-align: center;
    }

    // 奖品描述
    .prize-desc {
      grid-area: prizeDesc;

      width: 62vw;

      font-size: 4.359vw;
      color: #743920;
      text-align: justify;

      .prize-desc-text {
        // 「下载嗨喵APP」
        .app {
          color: #ec5f72;
        }
      }
    }

    // 左侧按钮和右侧按钮
    .left-btn,
    .right-btn {
      width: 28.9744vw;
      height: 12.3077vw;

      border-radius: 11.7949vw;

      font-size: 4.359vw;
      font-weight: 500;
      line-height: 12.3077vw;
      text-align: center;
    }

    // 左侧按钮
    .left-btn {
      grid-area: leftBtn;

      background: #fdf4a1;
      box-shadow: 0 -4px 12px 0 #f8d38b inset, 0 0 6px 0 #fff inset;

      color: #ec5f72;
    }

    // 右侧按钮
    .right-btn {
      grid-area: rightBtn;

      background: linear-gradient(113deg,
      #ff825e 0%,
      #ff6c87 100%,
      #f24ebd 100%);

      color: #fff;
    }

    // 联系客服按钮
    .contact-btn {
      justify-self: center;

      width: 53.3333vw;
      height: 12.3077vw;

      background: linear-gradient(103deg,
      #ff825e 0%,
      #ff6c87 100%,
      #f24ebd 100%);
      border-radius: 11.7949vw;
      grid-row: 10;
      grid-column: 1 / span 2;

      font-size: 4.359vw;
      line-height: 12.3077vw;
      color: #fff;
      text-align: center;
    }
  }

  // 关闭按钮
  .close-btn {
    grid-area: closeBtn;

    width: 47px;
    height: 47px;

    .close-btn-img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
